import { ref } from 'vue';
import { ElInput } from 'element-plus';
import { useForm } from '../..';

export interface IFormData {
  name: string;
  attrs: {
    age: number;
    sex: 1 | 2;
  };
}

export const useFormConfig = () => {
  const formData = ref<IFormData>({
    name: '奥德彪',
    attrs: {
      age: 20,
      sex: 1,
    },
  });
  const { formConfig } = useForm<IFormData>(() => [
    {
      prop: 'name',
      label: '名称',
      slotName: 'name',
    },
    {
      prop: 'attrs.age',
      label: '年龄',
      required: true,
      render(row) {
        return <ElInput v-model={row.attrs.age} />;
      },
    },
    {
      prop: 'attrs.sex',
      label: '性别',
      render(row) {
        return <ElInput v-model={row.attrs.sex} />;
      },
    },
  ]);
  return {
    formData,
    formConfig,
  };
};
